<template>
  <div class="footer">
       <!-- 第一未激活状态 -->
       <div class="disable" v-if="!isFocus">
           <input type="text" class="commentInput" placeholder="写跟贴" @focus="showArea">
           <div class="commentIcon">
               <div class="commentNumber">{{post.comment_length}}</div>
               <span class="iconfont iconpinglun-"></span>
           </div>
           <span class="iconfont iconshoucang" :class="{
               red:post.has_star
               }" @click="star"></span>


           <a href="https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Explanation_of_interface_privileges.html">
           <span class="iconfont iconfenxiang"></span>
           </a>
       </div>

       <!-- 第二  激活状态 -->
    <div class="enable" v-else>
        <textarea class="commentArea" v-model="comment" ref="commentArea" @blur="handleBlur"  rows="3"></textarea>
        <div class="btnSend" @click="send">发送</div>
    </div>
  </div>
</template>

<script>
export default {
    props:['post'],
    data(){
        return{
            isFocus : false,
            comment:'',
        }
    },
    methods:{
        showArea(){
            this.isFocus = true;
                 // 这里即使你改变了 data 数据,
            // vue 是会等你的剩余代码执行完了才更新页面
            // 所以你现在是获取不到这个 被 v-if 抹去的 dom 的
            // 有一个函数可以设置一个异步回调,告诉 vue 等待我们下一次渲染完毕的时候
            // 再执行回调函数
            this.$nextTick(()=>{
                // 这个函数是告诉 vue 在下一次渲染完毕的时候
                // 再执行这段代码
                // 一般用在这些代码强烈依赖于渲染后的页面状态的那种代码
                this.$refs.commentArea.focus();
            })
        },
        star(){
                this.$axios({
                    url:'/post_star/'+this.post.id,
                    method:'get'
                }).then(res=>{
                    const {message} = res.data;
                    console.log(message);
                        if(message =='收藏成功'){
                            this.post.has_star = true;
                        }else if(message =='取消成功'){
                            this.post.has_star =false
                        }
                })
        },
        handleBlur(){
            console.log(this.isFocus);
            
            // textarea 标签失去焦点时候
            // 判断是否有内容，如果有内容暂不隐藏
            if(!this.comment){
                this.isFocus=false;

            }
        },
        send(){
            // 点击发送时候
            
            this.isFocus = false;
            // 内容清空
            this.comment = ''

            // 更新页面数据,需要向父组件触发一个自定义事件
            this.$emit('newComment')

        }
    }
}
</script>

<style lang="less" scoped>
    .footer{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background:rgba(12, 12, 12, 0.6);
    }
    .disable{
        display: flex;
        align-items: center;
        padding: 2.778vw;
         justify-content: space-between;
        .commentInput {
                line-height: 8.611vw;
                font-size: 3.889vw;
                border: none;
                outline: none;
                border-radius: 4.444vw;
                padding: 0 4.444vw;
                background: #d7d7d7;
                color: #fff;
            }
            .iconfont {
                font-size: 7.222vw;
                color: #fff;
            }
            .commentIcon {
                position: relative;
                .commentNumber {
                    position: absolute;
                    top: -1.667vw;
                    left: 1.389vw;
                    height: 4.444vw;
                    line-height: 4.444vw;
                    box-sizing: border-box;
                    font-size: 3.333vw;
                    background: red;
                    color: white;
                    border-radius: 2.222vw;
                    padding: 0 2.222vw;
                    // left: 0.556vw;
                }
            }
        }
        .enable {
            display: flex;
            padding: 2.778vw;
            justify-content: space-between;
            align-items: flex-end;
            .commentArea {
                width: 75vw;
                background: #d7d7d7;
                color: #666;
                box-sizing: border-box;
                border: none;
                outline: none;
                border-radius: 2.222vw;
                padding: 4.444vw;
                resize: none;
            }
            .btnSend {
                background: red;
                color: white;
                padding: 0 4.167vw;
                height: 7.222vw;
                line-height: 7.222vw;
                border-radius: 3.611vw;
                border: 1px solid red;
                font-size: 14px;
            }
        
    }
    .red{
        color: #f00!important   
    }
</style>